import React, { Component, Fragment } from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import {
  Row,
  Col,
  Icon,
  Card,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
} from 'antd';
import numeral from 'numeral';
import {
  ChartCard,
  yuan,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from 'components/Charts';
import Trend from 'components/Trend';
import NumberInfo from 'components/NumberInfo';
import { getTimeDistance } from '../../utils/utils';
import EditableLinkGroup from 'components/EditableLinkGroup';
import OrderChart from '../Data/OrderChart';

import styles from './Analysis.less';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;


@connect(({ orderAnalysis, orderChart, loading }) => ({
  orderAnalysis,
  orderChart,
  loading: loading.effects['orderAnalysis/fetch'],
}))
export default class Analysis extends Component {
  state = {

  };

  componentDidMount() {
    this.props.dispatch({
      type: 'orderAnalysis/fetch',
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'orderAnalysis/clear',
    });
  }

  render() {
    const { orderAnalysis, loading, orderChart } = this.props;
    let {
      baseData,
    } = orderAnalysis;

    baseData = baseData || {};
    const { orderData } = orderChart;

    const topColResponsiveProps = {
      xs: 24,
      sm: 12,
      md: 12,
      lg: 12,
      xl: 6,
      style: { marginBottom: 24 },
    };

    const orderList = Array.isArray(orderData) ? orderData.map(v=>{
      return {
        x : v.dateTime,
        y : v.value
      }
    }) : [];

    return (
      <Fragment>
        <Row gutter={24}>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={true}
              title="7天订单笔数"
              action={
                <Tooltip title="最近一周订单总数">
                  <Icon type="info-circle-o" />
                </Tooltip>
              }
              total={baseData.weekTotal}
              contentHeight={46}
            >
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={true}
              title="7天收入"
              action={
                <Tooltip title="过去一周总收入">
                  <Icon type="info-circle-o" />
                </Tooltip>
              }
              total={() => <span dangerouslySetInnerHTML={{ __html: yuan(baseData.weekSales) }} />}
              contentHeight={46}
            >
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={true}
              title="待付款"
              action={
                <Tooltip title="等待付款订单数">
                  <Icon type="info-circle-o" />
                </Tooltip>
              }
              total={baseData.waitPay}
              contentHeight={46}
            >
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={true}
              title="待发货"
              action={
                <Tooltip title="等待发货订单数">
                  <Icon type="info-circle-o" />
                </Tooltip>
              }
              total={baseData.waitProvide}
              contentHeight={46}
            >
            </ChartCard>
          </Col>

          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={true}
              title="昨日下单笔数"
              action={
                <Tooltip title="昨日下单订单总数">
                  <Icon type="info-circle-o" />
                </Tooltip>
              }
              total={baseData.yesterdayTotal}
              contentHeight={46}
            >
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={true}
              title="昨日付款订单数"
              action={
                <Tooltip title="昨日付款订单总数">
                  <Icon type="info-circle-o" />
                </Tooltip>
              }
              total={baseData.yesterdayPayTotal}
              contentHeight={46}
            >
            </ChartCard>
          </Col>
        </Row>

        <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
          <OrderChart dispatch={ this.props.dispatch} data={orderData} type={['order','payOrder']}  />
        </Card>
      </Fragment>
    );
  }
}
